<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = 'app'>
     <h2>总价格：{{totalPrice}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                books:[
                    {
                        id:110, name:'unix编程艺术' , price:119
                    },
                    {
                        id:111, name:'代码大全' , price:109
                    },
                    {
                        id:112, name:'组成原理' , price:129
                    },
                    {
                        id:113, name:'操作系统' , price:139
                    }
                ]
            
            },
            computed:{
                totalPrice:function(){
                    let sum = 0;
                    for(let i  = 0; i < this.books.length; i++){
                        sum  += this.books[i].price

                    }
                    //要想方法中拿到的值必须通过return来返回值给方法
                    return sum
                }
               
            }
        })

        //计算属性与methods的区别：
        //计算属性只执行一次，而methods得重复执行多次
    </script>
</body>
</html>